<script setup>
import { reactive, toRefs } from 'vue';

defineProps({
  genMsg: {
    type: String,
    default: 'heheda',
  },
});

// const { name, info } = reactive({ name: 'zs', info: { age: 18 } });
// console.log('[ info ]-5', info);

// const user = reactive({ name: 'zs', info: { age: 18 } });
// const { name, info } = toRefs(user)

// toRefs 是一个单纯的函数，就是给对象中的每个键值对 套一层 ref，将其键对应的值转换成 ref 响应式数据
const { name, info } = toRefs(reactive({ name: 'zs', info: { age: 18 } }));
console.log('[ info ]-11', info);

const addAge = () => {
  // info.age++; // 这个代码不是响应式的
  info.value.age++; // 这个才是
};
</script>

<template>
  <div>{{ genMsg }}</div>
  <hr />
  <div>所谓响应式，就是数据变了，能驱动视图更新</div>
  <div>
    name: {{ name }}, <button @click="name = 'ls'">name = 'ls'</button>,
    这个不支持响应式了,
    但是变量的值还是变了的，如果后面监听到其他响应式数据变化了，也会用这个变量最新的数据值去更新视图
  </div>
  <div>
    info: {{ info }}, <button @click="info.age++">info.age++</button>,
    <button @click="addAge">addAge</button>
    这个是支持响应式的
  </div>
</template>
